<template>
  <div class="cart">
    <div class="menuBox" v-if="isMenu">
      <div class="cartDetail">
        <div class="title clearfix">
          <span class="cart fl">购物车</span>
          <span class="del fr" @click="emptyCartFn">清空</span>
        </div>
        <ul class="list">
          <li class="item clearfix" v-for="(item, index) in buyFoodsData" :key="index">
            <span class="name fl">{{item.foodsName}}</span>
            <div class="btnBox fr">
              <span>&yen;&nbsp;</span>
              <span class="price">{{item.foodsPrice * item.foodsNum}}</span>
              <foodsControl :typeName="item.foodsName" :foodsItem="item.foodsItem"></foodsControl>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="cartBar">
      <div class="cartBox">
        <div class="bg" :class="{active: totalNum}">
          <span class="foodsNum" v-if="totalNum">{{totalNum}}</span>
          <i class="icon icon-shopping_cart" @click="isMenu = !isMenu"></i>
        </div>
      </div>
      <div class="priceBox">
        <span class="price">&yen;&nbsp;{{totalPrice}}</span>
        <span class="deliveryPrice">另需配送费&yen;&nbsp;{{4}}元</span>
      </div>
      <div :class="priceClassCmp">
        <span class="tt">{{remainPrice}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  import foodsControl from './foodsControl' // 引入增加按钮
  import { mapState, mapMutations } from 'vuex' // 引入vuex
  export default {
    data() {
      return {
        isMenu: false, // 是否显示菜单
        initialPrice: 20, // 起送价20
        priceClass: 'sendBox' // 起送按钮样式
      }
    },
    computed: {
      ...mapState(['buyFoodsData']), // 获取从vuex存在中的商品详情
      totalNum() { // 食物总数
        // this.buyFoodsData1 = this.buyFoodsData
        // this.buyFoodsData1 = this.$store.state.buyFoodsData
        let num = 0
        for (let i = 0; i < this.buyFoodsData.length; i++) {
          num += this.buyFoodsData[i].foodsNum
        }
        console.log('buyFoodsData1', this.buyFoodsData)
        return num
      },
      totalPrice() { // 总价
        let num = 0
        for (let i = 0; i < this.buyFoodsData.length; i++) {
          num += this.buyFoodsData[i].foodsNum * this.buyFoodsData[i].foodsPrice
        }
        return num
      },
      remainPrice() { // 还差多少起送
        let result = 0
        if (this.totalPrice === 0) {
          result = `¥${this.initialPrice}起送`
        } else if (this.totalPrice < this.initialPrice) {
          result = `还差¥${this.initialPrice - this.totalPrice}起送`
        } else {
          result = '立即结算'
        }
        return result
      },
      priceClassCmp() { // 起送按钮的样式
        return this.totalPrice >= this.initialPrice ? 'sendBox active' : 'sendBox'
      }
    },
    methods: {
      ...mapMutations({buyFoodsDataFn: 'BUYFOODS_DATA'}),
      emptyCartFn() { // 清空购物车
        this.buyFoodsDataFn({})
      }
    },
    components: {
      foodsControl
    }
  }
</script>

<style lang="sass" scoped>
.cart
  .menuBox
    position: fixed
    top: 0
    left: 0
    right: 0
    bottom: 94rpx
    width: 750rpx
    bakcground-color: rgba(0, 0, 0, 0.6)
    backdrop-filter: blur(10rpx)
    .cartDetail
      position: absolute
      bottom: 0
      width: 750rpx
      .title
        box-sizing: border-box
        padding: 0 36rpx
        width: 100%
        height: 80rpx
        line-height: 80rpx
        background-color: #f3f5f7
        border-bottom: 1rpx solid rgba(7, 17, 27, 0.1)
        .cart
          font-size: 28rpx
          color: rgba(7, 17, 27, 1)
        .del
          font-size: 24rpx
          color: rgba(0, 160, 220, 1)
      .list
        padding: 0 36rpx
        max-height: 436rpx
        background-color: rgba(255, 255, 255, 1)
        .item
          height: 96rpx
          line-height: 96rpx
          border-bottom: 1rpx solid rgba(7, 17, 27, 0.1)
          .name
            font-size: 28rpx
            color: rgba(7, 17, 27, 1)
          .btnBox
            margin-left: 36rpx
            & > span
              font-size: 20rpx
              font-weight: normal
              color: rgba(240, 20, 20, 1)
            .price
              display: inline-block
              margin-right: 24rpx
              font-size: 28rpx
              font-size: 700
              
  .cartBar
    display: flex
    position: fixed
    left: 0
    bottom: 0
    width: 750rpx
    height: 94rpx
    background-color: #141d27
    .cartBox
      flex: 0 0 160rpx
      .bg
        display: flex
        flex-direction: column
        justify-content: center
        align-items: center
        margin: 0 24rpx
        width: 88rpx
        height: 88rpx
        border: 12rpx sonpmlid #141d27
        border-radius: 50%
        // background-color: rgba(0, 0, 0, 0.2)
        background-color: rgba(43, 52, 60, 1)
        transform: translateY(-16rpx)
        &.active
          background-color: rgba(0, 160, 220, 1)
          .icon
            color: #fff
        .foodsNum
          position: absolute
          top: -14rpx
          right: -12rpx
          padding: 0 12rpx
          font-size: 18rpx
          font-weight: 700
          line-height: 32rpx
          color: rgba(255, 255, 255, 1)
          border-radius: 12rpx
          background-color: rgba(240, 20, 20, 1)
          box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.4)
        .icon
          font-size: 48rpx
          line-height: 48rpx
          color: rgba(255, 255, 255, 0.4)
    .priceBox
      flex: 0 0 380rpx
      padding: 24rpx 0
      display: flex
      align-items: center
      .price
        font-size: 32rpx
        font-size: 700
        color: rgba(255, 255, 255, 0.4)
      .deliveryPrice
        display: inline-block
        margin-left: 24rpx
        padding-left: 24rpx
        height: 48rpx
        line-height: 48rpx
        border-left: 1rpx solid rgba(255, 255, 255, 0.1)
        font-size: 24rpx
        font-weight: normal
        color: rgba(255, 255, 255, 0.4)
    .sendBox
      flex: 0 0 210rpx
      // display: flex
      // flex-direction: column
      // justify-content: center
      // align-items: center
      text-align: center
      line-height: 94rpx
      background-color: rgba(43, 51, 59, 1)
      &.active
        background-color: rgba(0, 160, 220, 1)
        .tt
          color: #fff
      .tt
        font-size: 24rpx
        font-weight: 700
        color: rgba(255, 255, 255, 0.4)
</style>
